<template>
    <div class="add">
        <div class="common-layout">
            <el-container>
                <el-main>
                    <el-row>
                        <el-col :span="24">
                            <div class="grid-content ep-bg-purple">
                                <h4>基本信息</h4>
                                <el-form :inline="true" :model="ruleForm" :rules="rules" status-icon ref="ruleFormRef">
                                    <el-form-item label="客户" prop="customer">
                                        <el-input v-model="ruleForm.customer" style="width: 240px"
                                                  placeholder="请输入"/>
                                    </el-form-item>
                                    <el-form-item label="报价日期" prop="date">
                                        <div class="block">
                                            <el-date-picker
                                                v-model="ruleForm.date"
                                                type="date"
                                                placeholder="请选择日期"
                                                :disabled-date="disabledDate"
                                            />
                                        </div>
                                    </el-form-item>
                                    <el-form-item label="报价名称" prop="quoteName">
                                        <el-input v-model="ruleForm.quoteName" style="width: 240px"
                                                  placeholder="请输入"/>
                                    </el-form-item>
                                    <el-form-item label="业务员" prop="salesperson">
                                        <el-input v-model="ruleForm.salesperson" style="width: 240px"
                                                  placeholder="请输入"/>
                                    </el-form-item>
                                    <el-form-item label="部门" prop="region">
                                        <el-select
                                            v-model="ruleForm.region"
                                            placeholder="请选择部门"
                                            style="width: 240px;"
                                            clearable
                                        >
                                            <el-option label="Zone one" value="shanghai"/>
                                            <el-option label="Zone two" value="beijing"/>
                                        </el-select>
                                    </el-form-item>
                                </el-form>
                            </div>
                        </el-col>
                    </el-row>
                </el-main>
            </el-container>
        </div>
    </div>
</template>

<script setup lang="ts">
import {ref, reactive, watch} from 'vue'
import type {FormInstance, FormRules} from 'element-plus'

interface RuleForm {
    customer: string
    quoteName: string
    salesperson: string
    region: string
    date: string
}

const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
    customer: '',
    quoteName: '',
    salesperson: '',
    region: '',
    date: ''
})

const rules = reactive<FormRules<RuleForm>>({
    customer: [
        {required: true, message: '请输入客户名称', trigger: 'blur'}
    ],
    quoteName: [
        {required: true, message: '请输入报价名称', trigger: 'blur'}
    ],
    salesperson: [
        {required: true, message: '请输入业务员', trigger: 'blur'}
    ],
    region: [
        {required: true, message: '请选择部门', trigger: 'change'}
    ],
    date: [
        {required: true, message: '请选择日期', trigger: 'change'}
    ]
})

const disabledDate = (time: Date) => {
    return time.getTime() > Date.now()
}

// 调试：观察 ruleForm 的变化
watch(ruleForm, (newValue) => {
    console.log('ruleForm:', newValue)
})
</script>

<style scoped>
.el-row {
    margin-bottom: 20px;
}

.el-row:last-child {
    margin-bottom: 0;
}

.el-col {
    border-radius: 4px;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
}
</style>
